
<template>
  <page-view title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    <!-- actions -->
    <a-card style="margin-top: 24px" :bordered="false" title="用户信息">
      <detail-list>
        <detail-list-item term="id">付晓晓</detail-list-item>
        <detail-list-item term="姓名">32943898021309809423</detail-list-item>
        <detail-list-item term="身份证号">3321944288191034921</detail-list-item>
        <detail-list-item term="联系方式">18112345678</detail-list-item>
        <detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
        <detail-list-item term="某某数据">主治医生</detail-list-item>
        <detail-list-item term="病情状况">725</detail-list-item>
        <detail-list-item term="手术开始时间">2018-08-08</detail-list-item>
        <detail-list-item term="手术结束时间">2018-08-08</detail-list-item>
      </detail-list>
    </a-card>
    <a-card :bordered="false" title="流程进度">
      <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
        <a-step title="申请手术">
        </a-step>
        <a-step title="开始手术">
        </a-step>
        <a-step title="结束手术">
        </a-step>
        <a-step title="完成">
        </a-step>
      </a-steps>
    </a-card>
    <!-- 操作 -->
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="(key) => {this.activeTabKey = key}"
    >
      <a-table
        v-if="activeTabKey === '1'"
        :columns="operationColumns"
        :dataSource="operation1"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :columns="operationColumns"
        :dataSource="operation2"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :columns="operationColumns"
        :dataSource="operation3"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
    </a-card>
  </page-view>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
// import { PageView } from '@/layouts'
import DetailList from '@/components/tools/DetailList'

const DetailListItem = DetailList.Item

export default {
  name: 'Show',
  components: {
    // PageView,
    DetailList,
    DetailListItem
  },
  mixins: [mixinDevice],
  data () {
    return {
      // tabList: [
      //   {
      //     key: '1',
      //     tab: '操作日志一'
      //   },
      //   {
      //     key: '2',
      //     tab: '操作日志二'
      //   },
      //   {
      //     key: '3',
      //     tab: '操作日志三'
      //   }
      // ],
      // activeTabKey: '1',
      //
      // operationColumns: [
      //   {
      //     title: '操作类型',
      //     dataIndex: 'type',
      //     key: 'type'
      //   },
      //   {
      //     title: '操作人',
      //     dataIndex: 'name',
      //     key: 'name'
      //   },
      //   {
      //     title: '执行结果',
      //     dataIndex: 'status',
      //     key: 'status',
      //     scopedSlots: { customRender: 'status' }
      //   },
      //   {
      //     title: '操作时间',
      //     dataIndex: 'updatedAt',
      //     key: 'updatedAt'
      //   },
      //   {
      //     title: '备注',
      //     dataIndex: 'remark',
      //     key: 'remark'
      //   }
      // ],
      // operation1: [
      //   {
      //     key: 'op1',
      //     type: '订购关系生效',
      //     name: '曲丽丽',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '-'
      //   },
      //   {
      //     key: 'op2',
      //     type: '财务复审',
      //     name: '付小小',
      //     status: 'reject',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '不通过原因'
      //   },
      //   {
      //     key: 'op3',
      //     type: '部门初审',
      //     name: '周毛毛',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '-'
      //   },
      //   {
      //     key: 'op4',
      //     type: '提交订单',
      //     name: '林东东',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '很棒'
      //   },
      //   {
      //     key: 'op5',
      //     type: '创建订单',
      //     name: '汗牙牙',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '-'
      //   }
      // ],
      // operation2: [
      //   {
      //     key: 'op2',
      //     type: '财务复审',
      //     name: '付小小',
      //     status: 'reject',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '不通过原因'
      //   },
      //   {
      //     key: 'op3',
      //     type: '部门初审',
      //     name: '周毛毛',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '-'
      //   },
      //   {
      //     key: 'op4',
      //     type: '提交订单',
      //     name: '林东东',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '很棒'
      //   }
      // ],
      // operation3: [
      //   {
      //     key: 'op2',
      //     type: '财务复审',
      //     name: '付小小',
      //     status: 'reject',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '不通过原因'
      //   },
      //   {
      //     key: 'op3',
      //     type: '部门初审',
      //     name: '周毛毛',
      //     status: 'agree',
      //     updatedAt: '2017-10-03  19:23:12',
      //     remark: '-'
      //   }
      // ]
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        'agree': '成功',
        'reject': '驳回'
      }
      return statusMap[status]
    },
    statusTypeFilter (type) {
      const statusTypeMap = {
        'agree': 'success',
        'reject': 'error'
      }
      return statusTypeMap[type]
    }
  }
}
</script>

<style lang="less" scoped>

  .detail-layout {
    margin-left: 44px;
  }
  .text {
    color: rgba(0, 0, 0, .45);
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
  }

  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }

  .mobile {
    .detail-layout {
      margin-left: unset;
    }
    .text {

    }
    .status-list {
      text-align: left;
    }
  }
</style>
